import React,{} from 'react';
import root from "../../index";


// 类式组件
// class Demo extends React.Component {
//
//     state={
//         count:0
//     }
//     myRef=React.createRef()
//
//     componentDidMount() {
//         this.timer=setInterval(()=>{
//             const {count}=this.state
//             this.setState({count:count+1})
//         },1000)
//     }
//
//     componentWillUnmount() {
//         clearInterval(this.timer)
//     }
//
//     add=()=>{
//         const {count}=this.state
//         this.setState({
//             count: count+1
//         })
//     }
//
//     unmount=()=>{
//         root.unmount()
//     }
//
//
//     show=()=>{
//        alert(this.myRef.current.value)
//     }
//
//     render() {
//         return (
//             <div>
//                 <h1>当前数值为:{this.state.count}</h1>
//                 <button onClick={this.add}>+1</button>
//                 <button onClick={this.unmount}>卸载组件</button>
//                 <input type="text" ref={this.myRef}/>
//                 <button onClick={this.show}>点我提示数据</button>
//             </div>
//         );
//     }
// }


// 函数式组件
//
function Demo(){

    const [count,setCount]=React.useState(0)
    const [name,setName]=React.useState('Mike')

    const myRef=React.useRef()

    function add(){
        // setCount(count+1)
        setCount(count=>count+1)
    }

    function changeName(){
        // setName('Jack')
        setName(name=>'Jack')
    }

    function unmount(){
        root.unmount()
    }

    function show(){
        alert(myRef.current.value)
    }

    React.useEffect(()=>{
        let timer=setInterval(()=>{
            setCount(count=>
                count+1
            )
        },1000)
        return()=>{
            clearInterval(timer)
        }
    },[])

    return (

            <div>
                <input type="text" ref={myRef}/>
                <h1>当前数值为:{count}</h1>
                <h1>{name}</h1>
                <button onClick={add}>+1</button>
                <button onClick={changeName}>改名</button>
                <button onClick={unmount}>卸载组件</button>
                <button onClick={show}>点我显示数据</button>
            </div>

    )
}


export default Demo;